<template>
	<hyb-page title="切换城市">
		<template v-slot:body>
			<view class="gui-flex1 gui-flex gui-columns">
				<!-- 搜索组件 -->
				<view class="gui-city-search gui-bg-white gui-dark-bg-level-1">
					<gui-search @clear="search" @inputting="search"></gui-search>
				</view>
				<view style="margin-top:20rpx;" class="gui-padding-x">
					<text class="gui-h6 gui-block gui-primary-text">当前城市 : {{$store.state.city}}</text>
				</view>
				<view class="gui-flex1 gui-relative">
					<scroll-view :scroll-y="true" :scroll-into-view="showCityId" :scroll-with-animation="true"
						style="height: 100vh;">
						<view class="gui-padding-x" id="pageTop">
							<text class="gui-h6 gui-block gui-primary-text" style="padding-bottom:10rpx;">热门城市</text>
							<view class="gui-flex gui-rows gui-wrap gui-space-between"
								style="padding-bottom:10rpx; padding-right:30rpx;">
								<text class="hotcity-item gui-block gui-bg-white gui-dark-bg-level-3"
									v-for="(item, index) in hotCities" :key="index" :data-cityname="item.name"
									:data-citycode="item.code" @tap="chooseCity">{{item.name}}</text>
							</view>


							<text class="gui-h6 gui-block gui-primary-text" style="padding-bottom:10rpx;">最近选择</text>
							<view class="gui-flex gui-rows gui-wrap" style="padding-bottom:10rpx; padding-right:30rpx;">
								<text class="hotcity-item gui-block gui-bg-white gui-dark-bg-level-3"
									v-for="(item, index) in histories" :key="index" :data-cityname="item.name"
									:data-citycode="item.code" @tap="chooseCity">{{item.name}}</text>
							</view>
							<template v-for="(cities, index) in cityData" :key="index">
								<text class="gui-city-AZ gui-block gui-primary-text"
									:id="'gui-city-AZ-'+index">{{index}}</text>
								<text class="city-item gui-block gui-border-b gui-primary-text"
									:id="'gui-city-list-'+city.code" v-for="(city, cindex) in cities" :key="cindex"
									:data-cityname="city.name" :data-citycode="city.code"
									@tap="chooseCity">{{city.name}}</text>
							</template>
						</view>
					</scroll-view>
					<view class="gui-city-AZ-right">
						<text class="gui-city-AZ-right-item gui-block gui-transition-all gui-primary-text"
							v-for="(char, index) in AZ" :key="index"
							:class="[rightTapIdx == index ? 'gui-bg-black' : '', rightTapIdx == index ? 'gui-color-white' : '']"
							:data-char="char" :data-idx="index" @tap="changAZ">{{char}}</text>
					</view>
				</view>
			</view>
		</template>
	</hyb-page>
</template>

<script>
	import graceJS from '@/Grace6/js/grace.js';
	import dataObj from '@/Grace6/data/cityData.js';
	export default {
		data() {
			return {
				cityData: dataObj.cityData,
				AZ: dataObj.AZ,
				currentCity: "北京市",
				hotCities: [{
						code: 110000,
						name: "北京市"
					},
					{
						code: 310000,
						name: "上海市"
					},
					{
						code: 330100,
						name: "杭州市"
					},
					{
						code: 610100,
						name: "西安市"
					},
					{
						code: 120000,
						name: "天津市"
					},
					{
						code: 340200,
						name: "芜湖市"
					}
				],
				showCityId: '',
				searchTimer: null,
				searchIndex: -1,
				rightTapIdx: -1,
				province: "",
				city: "",
				district: "",
				histories: []
			}
		},
		created() {
			// alert(this.$store.state.base.city)

			this.histories = uni.getStorageSync("histories") || [];

			if (this.$store.state.base.city) {
				this.hotCities = [];
				let cities = this.$store.state.base.city.split(",")
				cities.forEach((city) => {
					this.hotCities.push({
						name: city
					})
				})
			}
		},
		methods: {

			dingwei() {
				if (this.$store.state.base.show_base && this.$store.state.base.show_base.is_dingwei) {
					uni.location.getLocation().then((location) => {
						if (location) {
							uni.gPost("base/location", {
								latitude: location.latitude,
								longitude: location.longitude
							}).then((address) => {
								this.$store.commit("set_city", address.city);
							})
						}
					}).catch((e) => {
						uni.showToast({
							title: "定位失败!",
							icon: 'none'

						})
						console.log(e)
					})
				}

			},
			// 选择
			chooseCity: function(e) {
				// 数据保存在 cityname 和 citycode
				var cityname = e.currentTarget.dataset.cityname;
				var citycode = e.currentTarget.dataset.citycode;
				// uni.showToast({
				// 	title: cityname + " [ " + citycode + " ]",
				// 	icon: "none"
				// });
				this.$store.commit("set_city", cityname);
				this.currentCity = cityname;

				let histories = uni.getStorageSync("histories") || [];

				let index = histories.findIndex((val) => {
					if (val.code == citycode) {
						return true;
					}
				})
				if (index == -1) {
					histories.push({
						name: cityname,
						code: citycode
					});
					uni.setStorageSync("histories", histories);
				}



				uni.navigateBack()
			},
			// 搜索
			search: function(k) {
				k = k.toLowerCase();
				if (k == '') {
					this.showCityId = 'pageTop';
					return;
				}
				if (this.searchTimer != null) {
					clearTimeout(this.searchTimer);
				}
				this.searchTimer = setTimeout(() => {
					this.searchBase(k);
				}, 500);
			},
			searchBase: function(k) {
				this.searchIndex = -1;
				for (var i in this.cityData) {
					for (var ii = 0; ii < this.cityData[i].length; ii++) {
						if (this.cityData[i][ii].name.indexOf(k) == 0 || this.cityData[i][ii].pinyin.indexOf(k) == 0) {
							this.searchIndex = this.cityData[i][ii].code;
							break;
						}
					}
					if (this.searchIndex != -1) {
						break;
					}
				}
				if (this.searchIndex != -1) {
					this.showCityId = 'gui-city-list-' + this.searchIndex;
				}
			},
			// 点击切换
			changAZ: function(e) {
				this.rightTapIdx = -1;
				var char = e.currentTarget.dataset.char;
				this.showCityId = 'gui-city-AZ-' + char;
				this.rightTapIdx = e.currentTarget.dataset.idx;
				setTimeout(() => {
					this.rightTapIdx = -1;
				}, 2000);
			}
		}
	}
</script>

<style scoped>
	.gui-h6 {
		line-height: 80rpx;
		font-size: 28rpx;
	}

	.gui-city-search {
		padding: 20rpx 40rpx;
	}

	.gui-city-AZ {
		font-weight: 700;
		line-height: 88rpx;
		font-size: 30rpx;
	}

	.gui-city-AZ-right {
		width: 50rpx;
		position: fixed;
		right: 0;
		top: 80px;
	}

	/* #ifdef H5 */
	.gui-city-AZ-right {
		top: 110px;
	}

	/* #endif */
	.gui-city-AZ-right-item {
		line-height: 38rpx;
		height: 38rpx;
		width: 38rpx;
		border-radius: 40rpx;
		font-size: 22rpx;
		text-align: center;
	}

	.hotcity-item {
		width: 210rpx;
		font-size: 26rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		text-align: center;
		overflow: hidden;
		margin: 8rpx 5rpx;
	}

	.city-item {
		line-height: 88rpx;
		height: 88rpx;
		font-size: 26rpx;
	}
</style>